<template>
	<view class="container">
		<view class="rankHeader flex flex-center">
			<view class="list left" v-if="two">
				<image :src="two.headimg" mode=""></image>
				<view class="name">{{two.nickname}}</view>
				<view class="ID">ID: {{two.id}} </view>
				<view class="amount">¥ {{two.order_amount_total}} </view>
			</view>
			<view class="list center" v-if="one">
				<image :src="one.headimg" mode=""></image>
				<view class="name">{{one.nickname}}</view>
				<view class="ID">ID: {{one.id}} </view>
				<view class="amount">¥ {{one.order_amount_total}} </view>
			</view>
			<view class="right list" v-if="tree">
				<image :src="tree.headimg" mode=""></image>
				<view class="name">{{tree.nickname}}</view>
				<view class="ID">ID: {{tree.id}} </view>
				<view class="amount">¥ {{tree.order_amount_total}} </view>
			</view>
		</view>
		<view class="rankList">
			<view class="list flex flex-align flex-bt" v-for="(item,index) in data" :key="index" v-if="index>=3">
				<view class="left flex flex-align">
					<view class="num">
						{{index+1}}
					</view>
					<view class="userInfo flex flex-align">
						<image :src="item.headimg" mode=""></image>
						<view class="">
							<view class="name"> {{item.nickname}} </view>
							<view class="Id"> ID:{{item.id}} </view>
						</view>
					</view>
				</view>
				<view class="right">¥ {{item.order_amount_total}} </view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				data:[],
				one:'',
				two:'',
				tree:''
			}
		},
		onLoad(e) {
			this.getdata()
			// 使用示例
		},
		
		methods: {
			
			getdata(){
				let that = this
				that.tui.request('api.auth.ranking/rankList', "post",{}, false, false, false).then((res) => {
					if(res.code==1){
						that.one = res.data.list[0]
						that.two = res.data.list[1]
						that.tree = res.data.list[2]
						that.data = res.data.list
					}
				}).catch((res) => {})
			},
			
		}
	}
</script>

<style lang="scss">
	.container{background: linear-gradient(to bottom,#FDCCA7,#F5EEDA,#F7F5E9);background-attachment: fixed;height: 100vh;overflow: hidden;padding:60rpx 30rpx 30rpx;}
	.rankHeader{margin: 0 auto;
		.list{width: 220rpx;background: linear-gradient(to bottom,#FF801F,#F6D6B9);text-align: center;padding: 30rpx 0;border-radius: 100rpx 100rpx 0 0 ;height:320rpx ;
		.name{color: #A65A00;font-size: 28rpx;margin-top: 10rpx;}
		.ID{color: #B7836A;font-size: 24rpx;margin: 10rpx 0;}
			image{width: 120rpx;height: 120rpx;border-radius: 100%;border: 2px solid #FFAA62;}
		}
		.amount{color: #A65A00;font-size: 36rpx;}
		.list.left{background: linear-gradient(to bottom,#F1B571,#FFE7AC)}
		.list.right{background: linear-gradient(to bottom,#F1E871,#F6E5B9)}
		.list.center{height: 340rpx;margin-top: -20rpx;
			image{width: 130rpx;height: 130rpx;}
		}
	}
	.rankList{background: rgba(255, 255,255, .48);padding:10rpx 30rpx;border-radius: 20rpx;border: 1px solid #fff;height: calc(100% - 340rpx);overflow-y: auto;
		.list{height: 100rpx;
			.left{
				.num{font-size: 32rpx;font-weight: bold;margin-right: 10rpx;width: 60rpx;text-align: center;}
				image{width: 80rpx;height: 80rpx;border-radius: 100%;margin-right: 10rpx;}
				.name{color: #000;font-size: 26rpx;margin-bottom: 8rpx;}
				.Id{font-size: 24rpx;color: #969799;}
			}
			.right{color: #A65A00;}
		}
	}
</style>